<template>
    <div :style="{padding:'0 20px',height:'100%',background:isMapPage?'rgba(0, 122, 255, 1)':'rgba(0, 122, 255, 0.1)'}">
        <div class="name">
            <span>欧乐堡</span>智慧景区管理平台{{ pathName }}
        </div>
        <div class="nav">
            <router-link to="/index">首页总览</router-link>
            <router-link to="/intelligence">智能管控</router-link>
            <router-link to="/scene">场景管控</router-link>
            <router-link to="/emergency">应急处置</router-link>
            <router-link to="/map">定位地图</router-link>
            <router-link to="/statistics">统计分析</router-link>
        </div>
        <div class="date">
            <Date />
        </div>
    </div>
</template>

<script>
import { defineComponent,nextTick,onMounted,ref } from 'vue';
import Date from './Date.vue';
import { useRoute } from 'vue-router';
export default defineComponent({
    components:{Date},
    setup() {
        
        const isMapPage = ref(false);
        onMounted(()=>{
            let url = window.location.href;
            if(/\/map$/.test(url)) {
                isMapPage.value = true;
            }
        });
        return {
            isMapPage
        }
    }
})
</script>

<style lang="scss">
    .name {
        float:left;
        font-size:32px;
        font-weight: bold;
        font-style: italic;
        line-height: 80px;
        span {
            color:#ff7500;
        }
    }
    .nav {
        float:left;
        margin-left:80px;
        height:32px;
        margin-top:23px;
        a {
            color:#fff;
            font-size:16px;
            padding:10px 20px;
            line-height:32px;
            border-radius: 20px;
            margin:0 10px;
        }
        a:hover,.router-link-active {
            background:#fff;
            color:rgb(0,122,255);
        }
    }
    .date {
        float:right;
        margin-top:28px;
    }
</style>